<template>
  <div class="login-container">
    <el-form :model="loginForm" label-position="top" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm" size="mini" @keyup.enter.native="submitForm('loginForm')">
      <el-form-item label="用户名" prop="username">
        <el-input v-model.number="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')" plain>登录</el-button>
        <el-button @click="resetForm('loginForm')" plain>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import eventBus from '@/plugins/eventBus'

export default {
  name: 'BlogLogin',
  data () {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
      setTimeout(() => {
        callback()
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      }
      setTimeout(() => {
        callback()
      }, 1000)
    }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        username: [{ validator: checkUsername, trigger: 'blur' }]
      },
      userInfo: {},
      shareInfo: {}
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // console.log(this.loginForm)
          const res = await this.$api.login(this.loginForm)
          if (res.data.err_code === 0) {
            // 设置token
            localStorage.setItem('username', res.data.data.username)
            localStorage.setItem('_id', res.data.data._id)
            localStorage.setItem('avatar', res.data.data.avatar)
            localStorage.setItem('role', res.data.data.role)
            localStorage.setItem('token', JSON.stringify(res.data.token))
            // 保存需要传递的信息
            this.userInfo.username = res.data.data.username
            this.userInfo.avatar = res.data.data.avatar
            if (res.data.data.role === 'admin') {
              this.userInfo.role = '超级管理员'
            } else {
              this.userInfo.role = '普通用户'
            }
            // 给shareInfo创建一个对象属性，并将userInfo给他赋值
            this.shareInfo.userInfo = this.userInfo
            this.shareInfo.comName = 'UserModule'
            // 触发传递函数
            this.share(this.shareInfo)
            // 提示信息
            this.$notify({
              title: '成功',
              message: '登录成功，欢迎回来' + res.data.data.username,
              type: 'success'
            })
          }
          // console.log(res)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    share (val) {
      this.$emit('shareInfo', val)
    },
    checkInitUserInfo () {
      if (localStorage.getItem('username')) {
        // 保存需要传递的信息
        this.userInfo.username = localStorage.getItem('username')
        this.userInfo.avatar = localStorage.getItem('avatar')
        if (localStorage.getItem('role') === 'admin') {
          this.userInfo.role = '超级管理员'
        } else {
          this.userInfo.role = '普通用户'
        }
        // 给shareInfo创建一个对象属性，并将userInfo给他赋值
        this.shareInfo.userInfo = this.userInfo
        this.shareInfo.comName = 'UserModule'
        // 触发传递函数
        this.share(this.shareInfo)
        // 提示信息
        this.$notify({
          title: '成功',
          message: '登录成功，欢迎回来' + localStorage.getItem('username'),
          type: 'success'
        })
      }
    }
  },
  created () {
    this.checkInitUserInfo()
  }
  // beforeDestroy () {
  //   eventBus.$emit('share', this.userInfo)
  //   // const comName = 'UserModule'
  //   // eventBus.$emit('shareComName', comName)
  // }
}
</script>

<style lang="less" scoped></style>
